參考:
http://www.w3schools.com/tags/ref_av_dom.asp
HTML5 DOM 為<audio> 和<video> 提供了方法、屬性和事件。
方法包括:
addTextTrack()
canPlayType(type)
load()
play()
pause()
HTML5 DOM 為<audio> 和<video> 提供了方法、屬性和事件。
這些方法、屬性和事件可以用JavaScript 來控制<audio> 和<video> 。
HTML Video Element 對象
<video id="video_id" loop="loop" src=""></video>
<script>
var video = document.getElementById("video_id");
</script>
HTML Audio/Video Methods
方法:
★addTextTrack()
在media中加入文字track
Example:
text1=myVid.addTextTrack("caption");
text1.addCue(new TextTrackCue("Test text", 01.000, 04.000,"","","",true));
TextTrackCue 對象的構造函數帶有id(例如“Test text”)、
startTime、endTime、插入點text、
webVTT cue settings 參數(用於定位、調整字體大小和對齊方式)
和pauseOnExit Boolean標記
(我找了TextTrackCue資料,可以參考下面連結)
參考:
http://www.html5rocks.com/zh/tutorials/track/basics/
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#texttrackcue
★canPlayType(type)
是否能播放某種格式的檔案
例如:
可以播放的類型是MIME type
檢測是否支持fooType 這樣的MIME type
code:
!!(document.createElement('video').canPlayType('fooType'));
★load()
重新加載src指定的資源,是在影片需要動態讀取來源時使用。
★play()
播放視訊,會將paused的值置為false
★pause()
暫停視訊,會將paused的值置為true
// Global variable to track current file name.
var currentFile = "";
function playAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
var btn = document.getElementById('play');
var audioURL = document.getElementById('audiofile');
//Skip loading if current file hasn't changed.
if (audioURL.value !== currentFile) {
oAudio.src = audioURL.value;
currentFile = audioURL.value;
}
// Tests the paused attribute and set state.
if (oAudio.paused) {
oAudio.play();
btn.textContent = "Pause";
}
else {
oAudio.pause();
btn.textContent = "Play";
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
ref:
使用 JavaScript 控制 Audio 物件
http://msdn.microsoft.com/zh-tw/library/ie/gg589489(v=vs.85).aspx
筆記心得:
找video api資料的時候,找到了這個文件,
之前有看到w3schools這個網站,
因為很多觀念都不懂,找了一堆資料、不知道從何看起~
不曉得要從方法、屬性和事件去研究。
現在回過頭來~
我好像一開始應該從這個開始看會比較好。
每種方法都是一種學習摟,找資料也是學問~
找的越多就覺得自己越多不會> <
目前HTML5/CSS3/Java Script API 相互應用,對我來說、還是有點模糊,
邊學習邊打技術筆記~感覺還是很勉強
之後必須要好好整理才行。
共勉之,多多練習就有機會進步!
謝謝你...
看到很多技術組的神人,寫的文章都超級專業
想想自己就真的跌跌撞撞,學得好慢阿><
但希望可以進步啦~
無論自身態度還是技術
都希望可以努力學習!
感謝大大的勉勵><
iamya提到:
跌跌撞撞
像我直接自爆